<template>
    <div>
        <!-- 导航区域 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/SystemHomePage' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>房屋信息</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片区域 -->
        <el-card>
            <el-row :gutter='40'>
                <el-col :span='8'>
                    <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getUserList">
                        <el-button slot="append" icon="el-icon-search" @click="getGrabble"></el-button>
                    </el-input>
                </el-col>
            </el-row>
               <!-- 用户列表区 -->
            <el-table :data="currentPageData" stripe>
                 <el-table-column label='#' type='index'></el-table-column>
                <el-table-column label='位置' prop='position'></el-table-column>
                <el-table-column label='房源' prop='resource'></el-table-column>
                <el-table-column label='面积/m^2' prop='area'></el-table-column>
                <el-table-column label='户型' prop='houseType'></el-table-column>
                <el-table-column label='状态' prop='state'></el-table-column>
                <el-table-column label='操作'>
                     <el-badge :value="12" class="item">
                        <el-button size="small">评论</el-button>
                    </el-badge>
                </el-table-column>
            </el-table>
            <!-- 分页区 -->
             <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pageNum"
                :page-sizes="[1, 2, 5, 10]"
                :page-size="queryInfo.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>
    </div>
</template>
<script>
export default {
    data() {
        return {
              queryInfo:{
                query : '',
                pageNum : 1,// 当前页数，默认为1
                pageSize : 5,// 每页显示数量
            },
            userList:[],//所有数据
            currentPageData:[],//当前页显示内容
            total:1,//页面所有条数
            FuzzyQuery:null,
        }
    },
    mounted() {
        this.getUserList()
    },
    methods: {
       //显示用户列表
        async getUserList(){
           const {data:result} = await this.$http.get('HouseList',{params:this.queryInfo})
           if(!result.ret)return this.$message.error('获取房屋列表失败')
            this.userList = result.data
            // this.userID = result.data
            this.currentPageData = result.data
            //显示共多少条
            this.total = this.userList.length
            this.handleSizeChange()
        },
       //房屋查询
        async getGrabble(){
            const getGrabbleValue = await this.$http.post('Grabble',{params:this.queryInfo.query})
            console.log(getGrabbleValue);
            const FuzzyQuerydata = getGrabbleValue.data.data.GrabbleHouse
            if(FuzzyQuerydata != ''){
                this.currentPageData = FuzzyQuerydata
            }else{
                this.currentPageData = this.userList
            }
        },
        //监听pageSize改变是事件
        handleSizeChange(newSize){
            //获取当前页面共多少条信息
            if (newSize) {
                this.queryInfo.pageSize = newSize
            }else{
                this.queryInfo.pageSize
            }
            let begin = (this.queryInfo.pageNum - 1) * this.queryInfo.pageSize;
            let end = this.queryInfo.pageNum  * this.queryInfo.pageSize;
            this.currentPageData = this.userList.slice(begin,end)
        },
        //监听页码值改变是事件
        handleCurrentChange(newPage){
            this.queryInfo.pageNum = newPage
            this.handleSizeChange(this.pageSize)
        },
    }
} 
</script>
<style scoped>
    .text {
        font-size: 14px;
    }
    .item {
        margin-top: 10px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

</style>